<template>
	<view class="main-cont box box-tb">
		<view class="tr box box-tb box-align-center">
			<u-avatar :src="user.icon" mode="circle" size="150"></u-avatar>
			<view class="tr-name">
				{{user.name}}
			</view>
			<view class="school">
				{{user.schoolName}}
			</view>
		</view>
		<view class="select" style="height: 400rpx;padding: 20rpx 89rpx;">
			<u-form :model="form" ref="uForm" label-width="90" label-position="left">
				<u-form-item prop="zydm" label="专业" :border-bottom="false">
					<u-input v-model="form.zymc" disabled placeholder="请选择专业" @click="form.showzy = true"></u-input>
					<view class="posa">
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-select v-model="form.showzy" :list="form.zylist" @confirm="confirm"></u-select>
				</u-form-item>
				<u-form-item label="学级" :border-bottom="false">
					<u-input v-model="form.xjmc" disabled placeholder="请选择学级" @click="form.showxj = true"></u-input>
					<view class="posa">
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-select v-model="form.showxj" :list="form.xjlist" @confirm="confirmxj"></u-select>
				</u-form-item>
				<u-form-item label="班级" :border-bottom="false">
					<u-input v-model="form.bjmc" placeholder="填写班级名称"></u-input>
				</u-form-item>
				<u-button type="primary" :customStyle="btn" @click="joinclass">确 定</u-button>
			</u-form>
		</view>
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("user"),
				form:{
					zydm:'',
					zymc:'',
					showzy:false,
					zylist:[],
					bjdm:'',
					bjid:'',
					showbj:false,
					bjlist:[],
					xj:'',
					xjmc:'',
					showxj:false,
					xjlist:[],
					bjmc:''
				}
			}
		},
		mounted() {
			console.log(this.user);
			this.getZyList();
			this.getXjList();
		},
		methods: {
			getZyList(){
				this.$api.post({url: '/dzy/list'}, {schoolid:this.user.schoolId}).then(res => {
						res.list.forEach( (item, index) => {
						   var object = {};
						   object.label = item.zymc; // 展示label
						   object.value = item.zydm; // value
						   this.form.zylist.push(object);
					   });
				})
			},
			getBjList(){
				this.form.bjlist=[];
				this.form.bjdm='';
				this.form.bjid='';
				this.$api.post({url: '/dclass/getclasslist'}, {schoolid:this.user.schoolId,zydm:this.form.zydm,xj:this.form.xj}).then(res => {
					console.log(res.list)
						res.list.forEach( (item, index) => {
						   var object = {};
						   object.label = item.bjmc; // 展示label
						   object.value = item.id; // value
						   this.form.bjlist.push(object);
					   });
				})
			},
			getXjList(){
				this.$api.post({url: '/comm/getXj'}).then(res => {
						res.list.forEach( (item, index) => {
						   var object = {};
						   object.label = item+'级'; // 展示label
						   object.value = item; // value
						   this.form.xjlist.push(object);
					   });
				})
			},
			confirm(e) {
				this.form.zydm = e[0].value;
				this.form.zymc = e[0].label;
				this.getBjList();
			},
			confirmbj(e) {
				this.form.bjid = e[0].value;
				this.form.bjmc = e[0].label;
			},
			confirmxj(e) {
				this.form.xj = e[0].value;
				this.form.xjmc = e[0].label;
				this.getBjList();
			},
			joinclass(){
				let params={
					schoolid:this.user.schoolId,
					xj:this.form.xj,
					classid:this.form.bjid,
					bjmc:this.form.bjmc,
					trId:this.user.id,
					trName:this.user.name
				};
				this.$api.post({url: '/dclass/trJoinClass'},params).then(res => {
					if(res.result=='have'){
						this.$refs.uToast.show({title: '班级【'+this.form.bjmc+'】已有带班老师',type: 'warning',});
					}else if(res.result=='success'){
						this.$refs.uToast.show({title: '您已成为班级【'+this.form.bjmc+'】带班老师',type: 'success',});
						setTimeout(() => {uni.reLaunch({url: '/pages/home/home'})}, 2300);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.tr {
		margin-top: 100rpx;
	}

	.tr-name {
		margin: 20rpx 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #181623;
	}

	.school {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #5F6572;
	}

	.select {
		margin-top: 68rpx;
	}

	.posa {
		position: absolute;
		top: 0;
		right: 35rpx;
	}

	.text {
		padding: 0 15rpx;
		width: 500rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		color: #AEB8CF;
		font-size: 28rpx;
	}
</style>
